<template>
  <div class="dashboard-container">
    <div class="dashboard-top">
      <el-row type="flex">
        <el-card class="box_card">
          <div class="info">
            <div class="pic">
              <img :src="staffPhoto">
            </div>
            <div class="user">
              <p class="user_name">{{ $t('hi') }},{{ name }}</p>
              <p class="user_manager">{{ $t('greeting') }}</p>
            </div>
          </div>
        </el-card>
      </el-row>
    </div>
    <div class="dashboard-context">
      <el-row type="flex" justify="space-between" :gutter="16">
        <el-col :span="13">
          <div class="left_box">
            <el-card class="box-card left_box_calendar">
              <div solt="header" class="header_box">
                <span class="title">工作日历</span>
              </div>
              <calendar class="set_calendar" />
            </el-card>
            <el-card class="box-card left_box_card_bulletin">
              <div class="title">
                <span>公告</span>
              </div>
              <div class="bulletin_item_box">
                <div class="bulletin_item">
                  <div class="item_left_pic">
                    <img src="@/assets/common/bigUserHeader.png">
                  </div>
                  <div class="item_right_info">
                    <p>
                      <span class="uname">朱振亿</span>
                      发布了
                      <span>第1期“传智大讲堂”互动讨论获奖名单公布</span>
                    </p>
                    <p>2018-07-21 15:21:38</p>
                  </div>
                </div>
                <div class="bulletin_item">
                  <div class="item_left_pic">
                    <img src="@/assets/common/bigUserHeader.png">
                  </div>
                  <div class="item_right_info">
                    <p>
                      <span class="uname">朱振亿</span>
                      发布了
                      <span>第1期“传智大讲堂”互动讨论获奖名单公布</span>
                    </p>
                    <p>2018-07-21 15:21:38</p>
                  </div>
                </div>
                <div class="bulletin_item">
                  <div class="item_left_pic">
                    <img src="@/assets/common/bigUserHeader.png">
                  </div>
                  <div class="item_right_info">
                    <p>
                      <span class="uname">朱振亿</span>
                      发布了
                      <span>第1期“传智大讲堂”互动讨论获奖名单公布</span>
                    </p>
                    <p>2018-07-21 15:21:38</p>
                  </div>
                </div>
              </div>
            </el-card>
          </div>
        </el-col>
        <el-col :span="11">
          <div class="right_box">
            <itemcard title="流程申请" class="right_box_top">
              <template v-slot:handle>
                <ul>
                  <li @click="showDialog=true"><el-button class="sideBtn">申请离职</el-button></li>
                  <li><el-button class="sideBtn">请假调休</el-button></li>
                  <li> <el-button class="sideBtn" @click="$router.push('/users/approvals')">审批列表</el-button>
                  </li>
                  <li><el-button class="sideBtn" @click="$router.push('/users/info')">我的信息</el-button></li>
                </ul>
              </template>
            </itemcard>
            <!-- 绩效指数 -->
            <el-card class="box-card">
              <div slot="header" class="header">
                <span
                  style="font-size: 24px;
                  color: #303133;"
                >绩效指数</span>
              </div>
              <!-- 放置雷达图 -->
              <Radar />
            </el-card>

            <itemcard title="快速开始/便捷导航" class="right_box_center">
              <template v-slot:handle>
                <ul>
                  <li><ebutton text="人事月报" /></li>
                  <li><ebutton text="考勤查询" /></li>
                  <li><ebutton text="考勤统计" /></li>
                  <li><ebutton text="员工审核" /></li>
                  <li><ebutton text="组织架构" options="link" goto="/departments" /></li>
                </ul>
              </template>
            </itemcard>
            <itemcard title="帮助链接" class="right_box_buttom">
              <template v-slot:handle>
                <div class="help_box">
                  <div>
                    <a href="javascript:;">
                      <span class="icon" />
                      <p>入门指南</p>
                    </a>
                  </div>
                  <div>
                    <a href="javascript:;">
                      <span class="icon icon-center" />
                      <p>在线帮助手册</p>
                    </a>
                  </div>
                  <div>
                    <a href="javascript:;">
                      <span class="icon icon-right" />
                      <p>联系技术支持</p>
                    </a>
                  </div>
                </div>
              </template>
            </itemcard>
          </div>
        </el-col>
      </el-row>
    </div>

    <!-- 弹出层 -->
    <el-dialog :visible="showDialog" title="离职申请" @close="btnCancel">
      <el-form
        ref="ruleForm"
        :model="ruleForm"
        status-icon
        label-width="110px"
        :rules="rules"
      >
        <!--离职表单-->
        <el-form-item label="离职时间" prop="end_time">
          <el-date-picker
            v-model="ruleForm.exceptTime"
            type="datetime"
            value-format="yyyy-MM-dd HH:mm:ss"
            placeholder="选择日期时间"
          />
        </el-form-item>
        <el-form-item label="离职原因" prop="reason">
          <el-input
            v-model="ruleForm.reason"
            type="textarea"
            :autosize="{ minRows: 3, maxRows: 8}"
            style="width: 70%;"
            placeholder="请输入内容"
          />
        </el-form-item>
      </el-form>
      <el-row slot="footer" type="flex" justify="center">
        <el-col :span="6">
          <el-button size="small" type="primary" @click="btnOK">确定</el-button>
          <el-button size="small" @click="btnCancel">取消</el-button>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import { startProcess } from '@/api/approvals'
import { mapGetters } from 'vuex'
import itemcard from './components/itemcard'
import ebutton from './components/ebutton'
import calendar from './components/calendar'
import Radar from './components/radar'
export default {
  name: 'Dashboard',
  components: {
    itemcard,
    ebutton,
    calendar,
    Radar
  },
  data() {
    return {
      defaultPic: require('@/assets/common/bigUserHeader.png'),
      showDialog: false,
      ruleForm: {
        exceptTime: '',
        reason: '',
        processKey: 'process_dimission', // 特定的审批
        processName: '离职'
      },
      rules: {
        exceptTime: [{ required: true, message: '离职时间不能为空' }],
        reason: [{ required: true, message: '离职原因不能为空' }]
      }
    }
  },
  computed: {
    ...mapGetters([
      'name',
      'staffPhoto'
    ])
  },
  methods: {
    btnCancel() {
      this.ruleForm = {
        exceptTime: '',
        reason: '',
        processKey: 'process_dimission', // 特定的审批
        processName: '离职'
      }
      this.$refs.ruleForm.resetFields()
      this.showDialog = false
    },
    async btnOK() {
      console.log(this.$store.state.user.userInfo.userId)
      try {
        // 1. 校验
        await this.$refs.ruleForm.validate()
        // 2. 发请求
        await startProcess({ ...this.ruleForm, userId: this.$store.state.user.userInfo.userId })
        console.log(12)
        // 3. 提示成功
        this.$message.success('提交流程成功')
        // 4.关闭弹窗
        this.showDialog = false
      } catch (error) {
        console.log(error)
      }
    }
  }

}
</script>

<style lang="scss" scoped>
.dashboard-container {
    margin: 10px;

  .dashboard-top {
    .box_card {
      width: 100%;
      .info {
        width: 100%;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        .pic {
          overflow: hidden;
          vertical-align: middle;
          height: 100px;
          width: 100px;
          margin-right: 10px;
          border-radius: 50%;
          img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
          }
        }
        .user {
          margin-top: 25px;
          p {
            margin: 0;
            padding-bottom: 15px;
          }
          .user_name {
            font-size: 24px;
            color: #303133;
          }
          .user_manager {
            font-size: 20px;
            color: #7f8c8d;
          }
        }
      }
    }
  }

  .dashboard-context {
    margin-top: 20px;

    /* 内容区域左侧开始 */
    .left_box {

      .left_box_calendar {
        padding: 5px 10px;

        ::v-deep.el-card__body {
          padding: 0;

          .el-calendar__body {
            padding: 0;
          }

          .el-calendar-table thead th {
            padding: 0;
            height: 50px;
          }

          .el-calendar-table tr td:first-child {
            border: 0;
          }

          .el-calendar-table tr:first-child td {
            border: 0;
          }

          .el-calendar-table td {
            border: 0;
          }

          .el-calendar-table .el-calendar-day {
            padding: 0;
            height: 40px;
          }

          .el-backtop, .el-calendar-table td.is-today span:first-child {
            width: 25px;
            height: 25px;
            color: #fff;
            line-height: 25px;
            background-color: #409EFF;
            border-radius: 50%;
          }

          .date-content {
            display: flex;
            justify-content: center;
            align-items: center;
          }

        }

        .header_box {
          padding: 20px;
          border-bottom: 1px solid #ebeef5;
          .title {
            font-size: 24px;
            color: #2a3e50;
          }

        }

        .set_calendar {
          padding: 20px;

          ::v-deep.el-calendar__header {
            display: none;
          }

        }

      }

      .left_box_card_bulletin {
        margin-top: 20px;

        .title {
          padding: 20px;
          border-bottom: 1px solid #ccc;
          span {
            font-weight: 700;
            display: block;
            font-size: 16px;
          }
        }

        .bulletin_item_box {
          padding: 0 30px;
          min-height: 350px;

          .bulletin_item {
            display: flex;
            justify-content: flex-start;
            align-items: center;
            padding: 18px 0 10px;
            border-bottom: 1px solid #ccc;

            .item_left_pic {
              overflow: hidden;
              width: 56px;
              height: 56px;
              margin-right: 10px;
              border-radius: 50%;

              img {
                width: 100%;
                height: 100%;
              }

            }

            .item_right_info {
              display: flex;
              flex-direction: column;

              p {
                margin: 0;
                padding-top: 6px;
                font-size: 14px;
                color: #303133;
                .uname {
                  color: #8a97f8;
                }
              }
            }

          }

        }

      }

    }
    /* 内容区域左侧结束 */

    /* 内容区域右侧开始 */
    .right_box{
      width: 100%;
      .el-card{
        margin-top: 20px;
      }
      .right_box_top, .right_box_center {

        ul {
          list-style: none;
          display: flex;
          justify-content: flex-start;
          flex-wrap: wrap;
          margin: 0;
          padding: 0;

          li {
            margin: 0 15px 10px 0;
          }

        }

      }

      .right_box_center, .right_box_buttom {
        margin-top: 20px
      }

      .right_box_buttom {
        width: 100%;

        .help_box {
          display: flex;
          justify-content: space-between;
          width: 100%;

          div{
            width: 33.33%;

            a{
              display: flex;
              flex-wrap: wrap;
              flex-direction: column;
              align-content: center;
              width: 100%;

              .icon {
                display: block;
                width: 76px;
                height: 76px;
                background: url('~@/assets/common/icon.png') no-repeat 6px 0;
              }

              .icon-center {
                background-position: -220px 0;
              }

              .icon-right {
                background-position: -460px 0;
              }

              p {
                font-size: 14px;
                margin: 0;
                text-align: center;
              }

            }

          }
        }

      }
    }
    /* 内容区域右侧结束 */

  }
}
</style>
